import React, { useCallback } from 'react';
import { Button, Table, Card, Form, Icon, Field, Input, Select, Pagination, Switch, Box } from '@alifd/next';
import { useFusionTable, useSetState } from 'ahooks';
import { FormattedMessage, useIntl } from 'react-intl';

import styles from './index.module.scss';
import { EntryMethodEnums, PropertyTypeEnums } from '@/pages/CommodityCenter/PropertyManage/entity';
import CreateDialog from '../CreateDialog';
import { getEnumLabel } from '@/utils/enum';
import PropertyService from '@/pages/CommodityCenter/PropertyManage/service';
import { useRequest } from 'ice';
import { EnableStatusEnums } from '@/common/entity';
import TableEmptyBlock from '@/components/TableEmptyBlock';

const { Column } = Table;

const FormItem = Form.Item;


const FilterList: React.FunctionComponent = (): JSX.Element => {
  const intl = useIntl();
  const field = Field.useField([]);

  // 禁用、启用
  const { request } = useRequest(PropertyService.enableStatus, {
    manual: true,
    onSuccess: () => { refresh(); },
    onError: () => { refresh(); },
  });

  const [dialogState, setDialogState] = useSetState({ visible: false, row: {} as any });

  const { paginationProps, tableProps, search, error, refresh } = useFusionTable(PropertyService.getPropertyPage, {
    field,
  });

  const { submit, reset } = search;

  const switchStatus = useCallback((row: BrandState.BrandItem, checked: boolean) => {
    request({ id: row.id, enable: checked });
  }, [request]);

  return (
    <Card free>
      <Card.Content>
        <Box spacing={20}>
          <Form className="filter-form" responsive fullWidth labelAlign="left" field={field}>
            <FormItem colSpan={4} label="属性名称:">
              <Input name="name" placeholder="请输入" hasClear />
            </FormItem>
            <FormItem colSpan={4} label="状态:">
              <Select
                name="enable"
                dataSource={EnableStatusEnums}
                hasClear
              />
            </FormItem>
            <FormItem colSpan={4} className={styles['form-actions']}>
              <Form.Submit type="primary" onClick={submit} validate style={{ marginRight: 20 }}>
                查询
              </Form.Submit>
              <Form.Reset onClick={reset}>
                <FormattedMessage id="btn.reset" />
              </Form.Reset>
            </FormItem>
          </Form>
          <div>
            <Button type="primary" iconSize="xs" onClick={() => setDialogState({ visible: true })}>
              <Icon type="add" />
              添加属性
            </Button>
          </div>
          <Table
            {...tableProps}
            hasBorder={false}
            emptyContent={<TableEmptyBlock error={error} onRefresh={refresh} />}
            primaryKey="id"
          >
            <Column dataIndex="id" title="编号" width={80} align="center" />
            <Column
              dataIndex="name"
              title="属性名称"
            />
            <Column
              dataIndex="attrType"
              title="属性类型"
              cell={(val) => getEnumLabel(PropertyTypeEnums, val)}
            />
            <Column
              dataIndex="modeType"
              title="录入方式"
              cell={(val) => getEnumLabel(EntryMethodEnums, val)}
            />
            <Column
              dataIndex="enable"
              title="状态"
              align="center"
              cell={(val, i, row) => (
                <Switch
                  autoWidth
                  checked={val}
                  checkedChildren="启用"
                  unCheckedChildren="禁用"
                  onChange={(checked) => switchStatus(row, checked)}
                />
              )}
            />
            <Column
              dataIndex="createTime"
              title="创建时间"
              cell={(val) => intl.formatDate(val, { hourCycle: 'h24', dateStyle: 'short', timeStyle: 'short' })}
            />
            <Column
              dataIndex="opera"
              title="操作"
              cell={(val, i, row) => (
                <Button type="primary" text onClick={() => setDialogState({ visible: true, row })}>编辑</Button>
              )}
            />
          </Table>
          <Pagination
            style={{ marginTop: 16, textAlign: 'right' }}
            shape="arrow-only"
            totalRender={(total) => (
              <FormattedMessage
                id="page.total"
                tagName="div"
                values={{ total }}
              />
            )}
            {...paginationProps}
          />
        </Box>
      </Card.Content>

      <CreateDialog
        visible={dialogState.visible}
        row={dialogState.row}
        onRefresh={refresh}
        onClose={() => setDialogState({ visible: false, row: {} })}
      />
    </Card>
  );
};

export default FilterList;
